<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>媒体查询</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--媒体查询引入 css文件-->
		<link media="screen and (max-device-width:800px)" rel="stylesheet" type="text/css" href="css/style414.css"/>
		<link media="screen and (max-device-width:375px)" rel="stylesheet" type="text/css" href="css/style375.css"/>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;	
				list-style: none;
			}
			li{
				width: 20%;
				border: 2px solid #008B8B;
				height: 100px;
				font-size: 30px;
				float: left;
				box-sizing: border-box;
			}
			@media only screen and (max-width:700px )and (min-width:480px) {
				li{
					width: 33.33%;
				}
				
			}
			@media only screen and (max-width:479px ) {
				li{
					width:100%;
				}
				
			}
			#ww{display: block;
				width: 200px;
				height: 200px;
				line-height: 200px;
				font-size: 32px;
				text-align: center;
				background: orange;
				opacity: 0.5;
				color: white;
			}
		</style>
	</head>
	<body>
		<span id="ww">
			nihaoma
		</span>
		
		<ul>
			<li>01</li>
			<li>02</li>
			<li>03</li>
			<li>04</li>
			<li>05</li>
		</ul>
	
		<picture>
			<source srcset="img/1photo.jpg" media="(max-device-width:1000px) and (min-device-width:501px)"  />
			<source srcset="img/2photo.jpg" media="(max-device-width:500px)" />
				
				<img src="img/IMG_20170825_065234.jpg" width="400px" height="300px">
		</picture>	
		
	</body>
</html>
